<template>
    <div>
        <h2>排房列表</h2>
        <table class="table  table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>房型名称</td>
                    <td>房号名称</td>
                    <td>操作</td>
                </tr>


                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Number }}</td>
                    <td>
                        <input type="button" class="btn btn-danger" value="删除" @click="peifangdel(item.Id)">
                        <input type="button" class="btn btn-primary" value="查询详情" @click="peifangupd(item.Id)">
                    </td>
                </tr>


            </tbody>


        </table>
        <span>总条数:{{ data.count }}条</span>
        <span>每页数:{{ type.size }}条</span>
        <span>当前页:{{ type.index + '/' + data.page }}页</span>
    </div>
    <div>
        <input type="button" class="btn btn-primary" value="首页" @click="getpage('a')">
        <input type="button" class="btn btn-primary" value="上一页" @click="getpage('b')">
        <input type="button" class="btn btn-primary" value="下一页" @click="getpage('c')">
        <input type="button" class="btn btn-primary" value="尾页" @click="getpage('d')">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();


///显示房型
let type = reactive({


    index: 1,
    size: 2,
})


let data: any = reactive({
    list: [],
    count: 0,
    page: 0,

})


//排房
onMounted(() => {
    ok();
})
//排房
const ok = () => {

    axios({

        url: 'https://localhost:7259/api/HouseType/PeiFangList',
        method: 'get',
        params: type,
    })

        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.count = res.data.count;
            data.page = res.data.page;


        })

        .catch((ree) => {
            console.log(ree);
        })



}


//查看详细

const peifangupd = (Id: any) => {

    router.push({
        path: '/PeiFangUpd',
        query: {
            Id: Id
        }

    })







}
//删除
const peifangdel = (Id: any) => {


    var f = confirm("确定删除吗？");
    if (f) {


        axios({
            url: 'https://localhost:7259/api/HouseType/PeiFangDel',
            method: 'delete',
            params: {
                Id: Id
            },
        })

            .then((res) => {
                console.log(res);

                if (res.data > 0) {
                    alert("删除成功");
                    ok();
                }
                else {
                    alert("删除失败");
                    return;
                }
            })

            .catch((ree) => {
                console.log(ree);
            })





    }










}




//分页
const getpage = (str: any) => {

    switch (str) {

        case 'a':
            if (type.index == 1) {
                return;
            }
            type.index = 1;
            break;


        case 'b':
            if (type.index == 1) {
                return;
            }
            type.index--;
            break;




        case 'c':
            if (type.index == data.page) {
                return;
            }
            type.index++;
            break;




        case 'd':
            if (type.index == data.page) {
                return;
            }
            type.index = data.page
            break;


    }

    ok();
}




</script>

<style scoped>
span {
    margin: 5px;
}

input {
    margin: 5px;
}
</style>